<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

    class Square extends React.Component {
        render() {
            return (
                <button className="squares" onClick={() => this.props.onClick()} style={{background:this.props.highlight?'red':''}}>
                    {this.props.value}
                </button>
            );
        }
    }

    function calculateWinner(squares) {
        const lines = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6],
        ];
        for (let i = 0; i < lines.length; i++) {
            const [a, b, c] = lines[i];
            if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
                return { winner: squares[a], position: [a, b, c] };
            }
        }
        return null;
    }

    class Board extends React.Component {
        // constructor() {
        //     super();
        //     this.state = {
        //         squares: Array(9).fill(null),
        //         xIsNext: true,
        //     };
        // }

        renderSquare(i) {
            const highlight = this.props.highlight[i];
            return <Square
                    key={i}
                value={this.props.squares[i]}
                onClick={() => this.props.onClick(i)}
                highlight={highlight}
            />;
        }


        render() {
            return (
                <div>
                    {
                        [0, 1, 2].map(i => (
                            <div className="board-row" key={i}>{
                                [0, 1, 2].map(j => this.renderSquare(3 * i + j))
                            }</div>
                        ))
                    }
                </div>
            );
        }
    }

    class Game extends React.Component {
        constructor() {
            super();
            this.state = {
                history: [{
                    squares: Array(9).fill(null),
                    change: null
                }],
                stepNumber: 0,
                xIsNext: true,
                ascOrder: true
            };
        }

        handleClick(i) {
            const history = this.state.history.slice(0, this.state.stepNumber + 1);
            const current = history[history.length - 1];
            const squares = current.squares.slice();
            if (calculateWinner(squares) || squares[i]) {
                return;
            }
            squares[i] = this.state.xIsNext ? "X" : "O";
            this.setState({
                history: history.concat([
                    {
                        squares: squares,
                        change: {
                            row: Math.floor(i / 3) + 1,
                            column: (i % 3) + 1
                        }
                    }
                ]),
                stepNumber: history.length,
                xIsNext: !this.state.xIsNext
            });
        }

        jumpTo(step) {
            this.setState({
                stepNumber: step,
                xIsNext: (!(step % 2))
            });
        }

        reverseOrder() {
            this.setState({
                ascOrder: !this.state.ascOrder
            });
        }

        render() {
            const history = this.state.history;
            const current = history[this.state.stepNumber];
            const result = calculateWinner(current.squares);

            const moves = history.map((step, move) => {
                const { change } = step;
                const desc = move ? 'Move #' + `(${change.row}, ${change.column})` : 'Game Start';
                return (<li key={move}>
                    <a href="#" onClick={() => this.jumpTo(move)}
                       style={{ fontWeight: (move === this.state.stepNumber) ? 'bold' : '' }}>{desc}</a>
                </li>);
            });

            if (!this.state.ascOrder) {
                moves.reverse();
            }

            let status;
            if (result) {
                status = `Winner: ${result.winner}`;
            } else {
                status = `Next player: ${this.state.xIsNext ? "X" : "O"}`;
            }
            let winnerPosition = {};
            if (result) {
                result.position.forEach(key => {
                    winnerPosition[key] = true;
                });
            }
            return (
                <div className="game">
                    <div className="game-board">
                        <Board
                            squares={current.squares}
                            highlight={winnerPosition}
                            onClick={this.handleClick.bind(this)}
                        />
                    </div>
                    <div className="game-info">
                        <div>{status}</div>
                        <button onClick={() => this.reverseOrder()}>reverse order</button>
                        <ol>{moves}</ol>
                    </div>
                </div>
            );
        }
    }

    // ========================================

    ReactDOM.render(
        <Game/>,
        document.getElementById('root')
    );


</script>
<!--
  Note: this page is a great way to try React but it's not suitable for production.
  It slowly compiles JSX with Babel in the browser and uses a large development build of React.

  Read this section for a production-ready setup with JSX:
  https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

  In a larger project, you can use an integrated toolchain that includes JSX instead:
  https://reactjs.org/docs/create-a-new-react-app.html

  You can also use React without JSX, in which case you can remove Babel:
  https://reactjs.org/docs/react-without-jsx.html
-->
</body>
<style>
    body {
        font: 14px "Century Gothic", Futura, sans-serif;
        margin: 20px;
    }

    ol, ul {
        padding-left: 30px;
    }

    .board-row:after {
        clear: both;
        content: "";
        display: table;
    }

    .status {
        margin-bottom: 10px;
    }

    .squares {
        background: #fff;
        border: 1px solid #999;
        float: left;
        font-size: 24px;
        font-weight: bold;
        line-height: 34px;
        height: 34px;
        margin-right: -1px;
        margin-top: -1px;
        padding: 0;
        text-align: center;
        width: 34px;
    }

    .squares:focus {
        outline: none;
    }

    .kbd-navigation .squares:focus {
        background: #ddd;
    }

    .game {
        display: flex;
        flex-direction: row;
    }

    .game-info {
        margin-left: 20px;
    }

</style>
</html>
